<template>
  <div style="display: flex;flex-direction: column;overflow: hidden;">
    <div class="tab">
      <div :class="tabName==='goods'?changeRed:''"
           @click="change('goods')">商品</div>
      <div :class="tabName==='assess'?changeRed:''"
           @click="change('assess')">评价</div>
      <div :class="tabName==='customer'?changeRed:''"
           @click="change('customer')">商家</div>
    </div>
    <component :is="tabName"></component>
    <bottomVue></bottomVue>
  </div>

</template>

<script>
import bottomVue from './bottom.vue'
import goods from '@/views/goods/index.vue'
import assess from '@/views/assess/index.vue'
import customer from '@/views/customer/index.vue'
export default {

  data () {
    return {
      tabName: 'goods',
      changeRed: 'changeRed'
    }
  },
  components: {
    goods,
    assess,
    customer,
    bottomVue
  },
  methods: {
    change (val) {
      this.tabName = val;
    }
  }

}
</script>

<style lang="less" scoped>
.tab {
  display: flex;
  height: 1.3333rem;
  line-height: 1.3333rem;
  text-align: center;
  font-size: 0.4267rem;
  color: rgb(121, 127, 131);
  font-weight: 300;
  // border-bottom: 1px solid rgb(181, 183, 186);
}
.tab > div {
  flex: 1;
}
.changeRed {
  color: rgb(242, 77, 85);
}
</style>